<!-- 公共详情信息卡片 -->
<template>
	<Card>
		<template #head>
			<view class="u-flex u-row-between">
				<view class="u-flex">
					<view class="">
						<iconfont :size="40" :name="`custom-icon-${Type.iconName}`"></iconfont>
					</view>
					<view class="u-padding-left-10">
						{{Type.label}}（总数: {{data.total}}个）
					</view>
				</view>
				<view>
					<u-icon @click="onOpen" :name="!visible ? 'arrow-down' :'arrow-up'" color="#409EFF"></u-icon>

				</view>
			</view>

		</template>

		<template #body>
			<view class="u-flex  u-flex-wrap">
				<view v-for="item,index in data.personArr " class="item-person u-margin-top-30">
					<text class="label">{{item.userName}}：</text>
					<text class="value">{{item.num}}个</text>
				</view>

			</view>

			<view v-show="visible">

				<view v-for="item,index in data.list" :class="index  % 2 == 0  ? 'background' : '' " class="u-margin-top-30   u-padding-20">
					<view class="title">
						{{item.deptName}}
					</view>
					<view class="u-flex u-margin-top-10">
						<view class="u-flex-1 label">
							{{item.phone}}
						</view>
						<view class="u-flex-1 label u-text-right">
							{{item.time}}
						</view>
					</view>
					<view class="u-margin-top-20 u-flex u-row-between">
						<view>
							<text class="label">坐席:</text>
							<text class="value">{{item.seatName}}</text>
						</view>
						<template v-if="type =='DianHuaZhaoRen'">
							<view class="">
								<text class="label">找人:</text>
								<text class="value">{{item.findUserName}} </text>
								<text class="value u-margin-left-12">{{item.findUserPhone}} </text>
							</view>
						</template>
						<template v-if="type == 'YiJianGongDan'">
							<view class="">
								<text class="state" :style="'color:'+item.state.color ">{{item.state.label}} </text>
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>
	</Card>
</template>

<script>
	import Card from '@/components/card/components/cardDetail.vue'
	import Colors from '@/common/color.js'
	import IconFontName from '@/common/customIconFontName.js'
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},

			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},

		computed: {

			Type() {
				let obj = {
					YiJieDianHua: {
						iconName: IconFontName.YiJieDianHua.iconName,
						label: '已接电话详情',
					},
					WeiJieDianHua: {
						iconName: IconFontName.WeiJieDianHua.iconName,
						label: '未接电话详情',
					},
					YiJianGongDan: {
						iconName: IconFontName.YiJianGongDan.iconName,
						label: '已建工单详情',
					},
					WeiJianGongDan: {
						iconName: IconFontName.WeiJianGongDan.iconName,
						label: '未建工单详情',
					},
					DianHuaZhaoRen: {
						iconName: IconFontName.DianHuaZhaoRen.iconName,
						label: '电话找人详情',
					},
					FuWuTaiJieJue: {
						iconName: IconFontName.FuWuTaiJieJue.iconName,
						label: '服务台解决详情',
					},
					WuXiaoDianHua: {
						iconName: IconFontName.WuXiaoDianHua.iconName,
						label: '无效电话详情',
					}
				}
				return obj[this.type]
			}
		},
		components: {
			Card,

		},
		data() {
			return {
				visible: false
			}

		},
		methods: {
			onOpen() {
				this.visible = !this.visible
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		font-weight: 400;
		font-size: 28rpx;
		color: #98A5B3;
	}

	.value {
		font-weight: 400;
		font-size: 28rpx;
		color: #0F2E4D;
	}

	.title {
		font-weight: 500;
		font-size: 28rpx;
		color: #0F2E4D;
	}

	.background {
		background: #F5F7FA;
		border-radius: 16rpx;
	}

	.state {

		font-weight: 400;
		font-size: 28rpx;
	}


	.item {
		&-person {
			min-width: 50%;
		}
	}
</style>
